<template>
    <div style="background-color: #F5F5F5;">
        <el-container style="width: 70%;margin: 0 auto;">
            <!--页头-->
            <el-header style="width: 0;height: 0"></el-header>
            <Header></Header>

            <el-carousel height="250px">
                <el-carousel-item v-for="item in urls" :key="item.id">
                    <img :src=item.idView style="width: 100%">
                </el-carousel-item>
            </el-carousel>
            <el-main style="height: 1000px;background-color:#8FC0A9;">
                <div>
                    <div style="display:flex;">
                        <div class="spr1">
                            <h3>-聚焦社会新公益-</h3>
                            <div>
                                <ul >
                                    <li @click="goOut(0)" style="margin-top: 20px">在中国推广“循环农业”的日本老头</li>
                                    <li @click="goOut(1)"  style="margin-top: 20px">第七届中国环境院所长论坛在南京举行</li>
                                    <li @click="goOut(2)" style="margin-top: 20px">科技赋能文物保护：让千年海外流失文物魂归故里</li>
                                    <li @click="goOut(3)" style="margin-top: 20px">无需言说的故事</li>
                                    <li @click="goOut(4)" style="margin-top: 20px">彩虹桥·为半心宝贝加油！系列活动</li>
                                </ul>
                            </div>
                        </div>
                        <div class="spr">
                            <h3>-校园公益活动-</h3>
                            <div style="background-color:#FAF3DD;margin-top: 20px;display: flex;text-align: center" v-for="item in sports" :key="item.postId">
                                <img :src=item.sportOther style="width: 150px;height: 120px">
                                <div style="margin-left: 80px">
                                    <h4 >{{item.sportName}}</h4>
                                    <el-button type="danger" @click="sportDetail(item.sportId)">参与</el-button>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div style="display: flex">
                        <div class="spr1">
                            <h3>-财报公示-</h3>
                            <ul>
                                <li style="margin-top: 10px">一月份收益：15</li>
                                <li style="margin-top: 10px">二月份收益：10</li>
                                <li style="margin-top: 10px">三月份收益：8</li>
                                <li style="margin-top: 10px">四月份收益：6</li>
                                <li style="margin-top: 10px">五月份收益：25</li>
                            </ul>
                        </div>
                        <div class="spr">
                            <h3>-绿色价值观-</h3>
                            <img :src=greenImg style="width: 400px">
                        </div>
                    </div>

                </div>

            </el-main>


            <Footer></Footer>
        </el-container>
    </div>
</template>

<script>
    import Header from "../components/Header";
    import Footer from "../components/Footer";
    export default {
        name: "Sport",
        components:{
            Header,
            Footer
        },

        data(){
            return{
                greenImg:require("../assets/ccc.jpg"),
                page:1,
                urls: [
                    {id:0,idView:require("../assets/goodsImage/2.jpg")},
                    {id:1,idView:require("../assets/goodsImage/5.jpg")},
                    {id:2,idView:require("../assets/goodsImage/3.jpg")},
                ],

                hrefUrl:[
                    "http://gongyi.163.com/16/0518/18/BNCBEHNU009364A3.html",
                    "http://gongyi.163.com/18/0604/14/DJFCL20F00933KC8.html",
                    "https://dy.163.com/article/FKFCKMRL0514R9KE.html?referFrom=",
                    "https://go.163.com/web/20180703_netease_charity/index.html",
                    "http://gongyi.163.com/16/0407/10/BK1T530A009364A4.html",
                ],

                sports:[

                ],
                sport:{
                    sportId:null,
                    sportName:null,
                    sportOther:"",
                }
            }
        },

        methods:{
            goOut(num){
                window.location.href = this.hrefUrl[num];
            },
            sportDetail(num){
                localStorage.setItem("sportID",num);
                this.$router.push("/sportDetail");
            },
        },

        created() {
            this.$http({
                method:'POST',
                url:'http://localhost:8083/sport/showAll',
                params:{
                    "page":this.page,
                }
            }).then(res=>{
                console.log(res.data);
                for (let i in res.data){
                    this.sport = res.data[i];
                    this.sport.sportOther = require("../assets/goodsImage/" + res.data[i].sportOther);
                    this.sports.push(this.sport);
                }
            }).catch(err=>{
                console.log(err)
            })
        }
    }
</script>

<style scoped>
.spr{
    margin: 40px;
    /*background-color: #FAF3DD;*/
    width: 400px;
    height: 400px;
    /*border-radius: 10px;
    box-shadow: #5F9EA0 2px 2px 2px;*/
}
    .spr1{
        margin-left: 120px;
        margin-top: 40px;
        /*background-color: #FAF3DD;*/
        width: 400px;
        height: 400px;
    }
</style>